Een About Me pagina toevoegen

Doelstelling

1. leren hoe je de onderdelen van het MVC framework met elkaar verbindt om tot een werkende website te komen
2. leren eenvoudige html en css gebruiken in een View pagina van het MVC Framework

Stappenplan

1. ​Kies enkele foto's die je op de website gaat gebruiken. Maak een Images map in de Content folder en plaats daar de foto's in.
2. Schrijf enkele paragrafen over jezelf, bijvoorbeeld over je eerste werkervaring, over wat je nu doet of wat je van plan bent te doen. Wil je niets over jezelf zeggen, gebruik dan een fictief persoon en noem je pagina About X. X staat voor de fictieve naam van je personnage.
3. We gaan in de eerste oefening geen model maken. We stoppen de gegevens, die we op de pagina willen tonen, in de View.
   1. In de map Views/Home maak je een AboutMe.cshtml bestand. Rechtermuisknop op de Home folder, kies Add New Item en selecteer MVC 5 View Page with Layout (Razor).
   2. Toon de Message eigenschap van de ViewBag die straks zullen instellen in de AboutMe actiemethode van de Controller klasse.
   3. Daarin voeg je html en gegevens toe voor:
      1. je voornaam
      2. je naam
      3. een foto van jezelf (of van een fictieve persoon of van je hond)
      4. minstens twee paragrafen over je zelf
      5. minstens een foto die één van je activiteiten illustreet
   4. Voeg een menu-link toe in de pagina Views/Shared/_Layout.cshtml.

   5. In de HomeController klasse voer je een actiemethode toe voor de About Me pagina:
      public ActionResult AboutMe()
      {
          // boodschappentas om data van de Controller naar de View
          // te brengen
          ViewBag.Message = "De About Me pagina";
          return View();
      }

   6. Voeg minimum CSS toe (meer mag) in een bestand met de naam app.css:
      1. font-family Verdana
      2. fontsize voor Voornaam en Familienaam 1.4em
      3. fontsize voor tekst in paragrafen: 1em
      4. Bijvoorbeeld voor figure en figcaption:

         figure {
             text-align: center;
             border: solid 1px #ccc;
             border-radius: 2px;
             background: rgba(0,0,0,0.05);
             padding: 10px;
             margin: 10px 20px;
             display: inline-block;
             float:left;
         }
         
         figure > figcaption {
             text-align: center;
             display: block; /* For IE8 */
         }
         

   7. Plaats een link naar het css bestand in het _Layout.cshtml bestand.
   8. Run de website en klik op de About Me menu-link.
4. Stuur de volgende bestanden via de Insturen link:
   1. _Layout.cshtml
   2. AboutMe.cshtml
   3. HomeController.cs
   4. een printscreen van je AboutMe pagina (png bestand)
5. Mijn resultaat: